<template>
  <div class="filter-item">
    <div class="middle">
       <!-- 小标题 -->
    <van-cell title="户型"  />
    <!-- 内容宫格 -->
    <!-- 第一个 -->
    <div class="content">
      <van-grid :column-num="2" :gutter="8" :border="false">
      <van-grid-item v-for="value in oldhousetype" :key="value.label"  >
         <input type="checkbox" v-model="list1" hidden  :value="value.value" :id="value.label"> <label :class="{select:list1.some(item=>item===value.value)}" :for="value.label">{{value.label}}</label>
      </van-grid-item>
    </van-grid>
    </div>
     <!-- 小标题 -->
    <van-cell title="朝向"  />
    <!-- 第二个 -->
    <div class="content">
      <van-grid :column-num="2" :gutter="8" :border="false">
      <van-grid-item  v-for="value in oldhouseoriented" :key="value.label"   >
         <input type="checkbox" v-model="list2" hidden  :value="value.value" :id="value.label"> <label :class="{select:list2.some(item=>item===value.value)}" :for="value.label">{{value.label}}</label>
      </van-grid-item>
      </van-grid>
    </div>
     <!-- 小标题 -->
    <van-cell title="楼层"  />
    <!-- 第二个 -->
    <div class="content">
      <van-grid :column-num="2" :gutter="8" :border="false">
      <van-grid-item v-for="value in oldhousefloor" :key="value.label"  >
         <input type="checkbox" v-model="list3" hidden  :value="value.value" :id="value.label"> <label :class="{select:list3.some(item=>item===value.value)}" :for="value.label">{{value.label}}</label>
      </van-grid-item>
      </van-grid>
    </div>
     <!-- 小标题 -->
    <van-cell title="房屋亮点"  />
    <!-- 第二个 -->
    <div class="content">
      <van-grid :column-num="2" :gutter="8" :border="false">
      <van-grid-item v-for="value in oldcharacteristic" :key="value.label"  >
         <input type="checkbox" v-model="list4" hidden  :value="value.value" :id="value.label"> <label :class="{select:list4.some(item=>item===value.value)}" :for="value.label">{{value.label}}</label>
      </van-grid-item>
      </van-grid>
    </div>
    </div>
    <!-- 底部按钮 -->
         <div class="tabbar">
       <van-button plain type="primary">取消</van-button>
      <van-button type="primary" @click="finishfilter">提交</van-button>
    </div>
  </div>
</template>

<script>
import { getfilterdata, filterhouses } from '@/api/hotel'
export default {
  props: {
    id: {
      type: String
    },
    value2: {
      type: String
    },
    value3: {
      type: String
    }
  },
  data () {
    return {

      oldhousetype: [],
      oldhousefloor: [],
      oldhouseoriented: [],
      oldcharacteristic: [],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list: [],
      more: ''
    }
  },

  created () {
    this.loadfilterdata()
  },

  methods: {
    async loadfilterdata () {
      const res = await getfilterdata(this.$store.state.cityname.value)
      console.log(res)
      this.oldhousetype = res.data.body.roomType
      this.oldhousefloor = res.data.body.floor
      this.oldhouseoriented = res.data.body.oriented
      this.oldcharacteristic = res.data.body.characteristic
    },
    finishfilter () {
      this.$emit('close')

      console.log(this.list1)
      this.list = [...this.list1, ...this.list2, ...this.list3, ...this.list4]
      this.more = this.list.join(',')
      this.$emit('submitdata', this.more)
      this.getfilterhouse({
        cityId: this.$store.state.cityname.value,
        start: 1,
        end: 20,
        area: this.id,
        rentType: this.value2,
        price: this.value3,
        more: this.more
      })
    },
    async  getfilterhouse (data) {
      const res = await filterhouses(data)
      console.log(res)
    }
  }
}
</script>

<style scoped lang='less'>

.select{
  color: red;
}
/deep/.filter-item{
  .van-cell__title{
  font-size: 15px;
  color: red;
  }
}
/deep/.content{
    padding-left: 40px;
    padding-right: 40px;

    .van-grid{
      label {
        font-size: 12px;
      }
      // background-color: pink;
      border-bottom: 1px solid #ccc;
      padding-bottom: 25px;
    }
    .van-grid-item__content{
      width: 72px;
      height: 32px;
      border: 1px solid #ccc;

      // background-color: green;
    }

  }
.tabbar {
  position: sticky;
  left: 0;
  bottom:0;
  width: 100%;
  display:  flex;
  .van-button {
    flex: 1;
  }
}

</style>
